
<template>
  <div class="personal-information">
    <div class="content">
      <div class="title-box">
        <div class="title">个人信息</div>
        <div class="edit" >
          <i class="iconfont icon-xin "></i>
          <span>编辑</span>
        </div>
      </div>
      <div class="list">
        <div>姓名:</div>
        <div class="list-msg">tanyujun </div>
      </div>
      <div class="list">
        <div>年级:</div>
        <div class="list-msg">大三 </div>
      </div>
      <div class="list">
        <div>专业:</div>
        <div class="list-msg">计算机编程 </div>
      </div>
      <div class="list">
        <div>手机:</div>
        <div class="list-msg">135*****889 </div>
      </div>
      <div class="list">
        <div>个人简介:</div>
        <div class="list-msg">这是一个很长的个人文本，这是一个很长的个人文本，这是一个很长的个人文本， </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      centerDialogVisible: false,
      search: '',
      sp: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.personal-information {
  .content {
    padding: 28px 28px 156px 36px;

    .title-box {
      display: flex;
      align-items: center;
      .title {
        flex: 1;
        font-size: 24px;
        color: rgba(6, 17, 37, 1);
        font-weight: 500;
      }
      .edit {
        font-size: 16px;
        color: rgba(104, 115, 136, 1);
        .icon-xin {
          font-size: 16px;
          color: #687388;
        }
      }
    }
    .list {
      display: flex;
      align-items: center;
      font-size: 18px;
      color: rgba(19, 35, 64, 1);
      font-weight: 500;
      .list-msg {
        flex: 1;
        padding: 20px 0;
        font-size: 18px;
        color: rgba(51, 69, 102, 1);
        border-bottom: 1px solid #000;
        margin-left: 16px;
      }
    }
  }

}
</style>
